<template>
  <div>
   <h3>该商品适应的车型：</h3>  
   <div style="height:10px;"></div>
    <el-button  @click="addCarModel" style="margin-bottom:20px;">添加车型信息 </el-button>


    <el-table
      :data="carList"
      style="width: 100%">
      <el-table-column prop="id" label="车型id" width="100" />
        <el-table-column prop="brandName" label="品牌名称" width="100" />
      <el-table-column prop="seriesName" label="车系名" width="100" />
     <el-table-column prop="years" label="年份" width="100" />
     <el-table-column prop="modelName" label="模型名称" width="160" />

     		<el-table-column label="操作" width="120">
				<template scope="scope">

					<!-- <el-button size="mini" type="danger" @click="doDelete(scope.row)" plain>删除</el-button> -->

				</template>
			</el-table-column>
    </el-table>


   	<el-dialog title="添加车型信息" :visible.sync="carModel.show" :close-on-click-modal="false" width="80%" >

       <!-- <div >共有车型<span style="color:red;">{{getLenght(carModelList)}}</span>个,选中<span style="color:red;font-weight:800;font-size:16px;">{{getLenght(carModelListSelected)}}</span>个  </div> 
       <el-form :inline="true" :model="carModel">
     
        <el-select v-model="carModel.brand" placeholder="车型品牌"  @change="onChangeBrand">
        <el-option
              v-for="item in carModel.brandOptions"
              :key="item.id"
              :label="item.brandName"
              :value="item.id"
             >
        </el-option>
      </el-select>

        <el-select v-model="carModel.serials" placeholder="车型系列">
        <el-option
              v-for="item2 in carModel.serialsOptions"
              :key="item2.id"
              :label="item2.seriesName"
              :value="item2.id">
        </el-option>
      </el-select>
      
        
        
        <el-input v-model="carModel.years" placeholder="年份" style="width:150px;"></el-input>
        
        <el-button type="primary" plain @click="doSearch"> 查询</el-button>
      </el-form>




    	<el-table :data="carModelList" highlight-current-row 
       max-height="300"
       style="width: 120%;"
        @selection-change="onModelSelectChange"
       >
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column prop="id" label="模型编号" width="100" sortable>
			</el-table-column>

      <el-table-column prop="seriesName" label="系列名字" width="180" sortable>
			</el-table-column>

      <el-table-column prop="brandName" label="品牌名字" width="100" sortable>
			</el-table-column>
      <el-table-column prop="modelName" label="模型名字" width="200" sortable>
			</el-table-column>

             <el-table-column prop="years" label="年份" width="100" sortable>
			</el-table-column>

         <el-table-column prop="style" label="风格" width="160" sortable>
			</el-table-column>



    	</el-table> -->




      
<div style="text-align:center;padding:20px 0">    <el-button  @click="screenInit">选择筛选条件</el-button>
</div>
       
     


<!-- 

        <el-form  label-width="5em">
                  <el-row :gutter="24" class="row-container">
                    <el-col :span="6"  v-for="n in list">
                         <el-form-item :label="n.keyName">
            <el-input v-model="n.text"></el-input>
          </el-form-item>
                    </el-col>
                </el-row>
        </el-form> -->


          <el-table ref="multipleTable" v-show="modelTableShow"  :data="modelData.modelList" style="width:100%;font-size:15px" stripe border height="700" @selection-change="setSelected" size="small">
        <el-table-column type="selection" width="50px" align="center" fixed="left"></el-table-column>

        <el-table-column v-for="tableHeader in modelData.headerList" :key="tableHeader.keyId" :label="tableHeader.keyName" min-width="150px" align="center">
          <template slot-scope="scope">
            <div style='width:100%:height:100%'>
              <span >{{scope.row[tableHeader.keyId]}}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
<!-- <el-button @click="saveSelectCar"> 确定插入</el-button> -->

		
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="carModel.show=false">取消</el-button>
				<el-button type="primary" @click.native="saveSelectCar()">提交</el-button>
			</div>
		</el-dialog>

   <el-dialog title="筛选" :visible.sync="screenShow" width="30%" center top="10vh" :close-on-click-modal='false'>
            <div id="limit-switch">
                <!-- <span>筛选结果分页</span><el-switch v-model="limit" active-color="#409EFF" inactive-color="#B4BCCC"></el-switch> -->
            </div>
            <div id="screen-main">
                <el-table :data="list" style="width:100%;font-size:15px;" stripe border height="500" @selection-change="setKeyIds" size="mini">
                    <el-table-column type="selection" width="50" align="center"></el-table-column>
                    <el-table-column prop="keyName" label="属性名称" width="180" align="center"></el-table-column>
                    <el-table-column label="筛选关键词" align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.text"></el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="screenShow=false">取消</el-button>
              <el-button type="primary" @click="onsubmit">确定</el-button>
            </span>
        </el-dialog>
    
  </div>
</template>

<script>
import * as Api from "@/api/Api.js";
import * as Config from "@/api/Config.js";
import * as CarApi from "@/api/CarApi.js";
import * as RoundApi from "@/api/RoundApi.js";
import axios from "axios";

export default {
  data() {
    return {
      screenShow: false,
      list: [],
      keyIds: [],
      modelTableShow: false,
      modelData: [], //列表对象
      //列表
      editerData: {
        show: false,
        selectedModel: [],
        model: {},
        propertyKey: {
          keyId: "",
          keyName: "",
          propertyType: ""
        }
      },

      carList: [],
      carModelList: [],
      carModelListSelected: [],
      carModel: {
        show: false,
        brand: "",
        serials: "",
        years: "",
        brandOptions: [],
        serialsOptions: []
      }
    };
  },
  props: ["goodsId"],

  watch: {
    goodsId() {
      console.log("carGoods....");

      this.loadCarLink();
    }
  },

  // updated() {
  //   console.log("update..." + this.goodsId);
  // },

  //最新修改

  methods: {
    saveSelectCar() {
   if (this.editerData.selectedModel.length < 1) {
        this.$alert("还没选择车型数据");
        return;
      }
      let idList = [];
      this.editerData.selectedModel.forEach((item, index) => {
        idList.push(item.modelId);
      });
        CarApi.addGoodsCarLink(this.goodsId, idList).then(res => {
        if (res.retCode) {
          this.$message("添加车型数据成功");

          this.carModel.show = false;
          this.loadCarLink();
        } else {
          this.$alert("添加车型数据失败");
        }
      });
      
    },
    setSelected: function(val) {
      console.log(val);
      this.editerData.selectedModel = val;
    },
    //初始化筛选字段
    screenInit: function() {
      if (this.list.length > 0) {
        this.screenShow = !this.screenShow;
      } else {
        RoundApi.initFilterList().then(res => {
          if (res.retCode) {
            console.log("初始化", res);
            this.list = res.data;
            this.screenShow = !this.screenShow;
          }
        });
      }
    },

    setKeyIds: function(val) {
      this.keyIds = val;
    },

    onsubmit: function() {
      var params = new URLSearchParams();
      for (var i = 0; i < this.keyIds.length; i++) {
        params.append("keyIds", this.keyIds[i].keyId);
      }
      for (var i = 0; i < this.list.length; i++) {
        if (this.list[i].text.trim() != "")
          params.append(this.list[i].keyId, this.list[i].text);
      }

      this.modelTableShow = true;

      this.modelTableLoading = true;

      this.isInitSelectnnnn = true;
      axios
        .post(Config.g_service_url + "/screen", params)
        .then(
          function(response) {
            console.log("筛选之后", response.data.data);
            this.modelData = response.data.data;

            this.selectCar({ infoId: this.infoId });
            // this.initSelectnnnn();
          }.bind(this)
        )
        .catch(function(error) {});

      this.screenShow = false;
    },

    loadCarLink() {
      Api.queryGoodsCarLink(this, this.goodsId).then(res => {
        if (!res.retCode) {
          this.$alert("查询车型关联信息出错！");
          return;
        }
        this.carList = res.data;

        console.log(this.carList);
      });
    },

    doDelete(row) {
      let linkId = row.goodsCarLinkId;

      console.log(linkId);

      CarApi.deleteGoodsCarLink(linkId).then(res => {
        console.log(res);
        if (res.retCode) {
          this.loadCarLink();
        } else {
          this.$alert("删除错误");
        }
      });
    },

    doSubmit() {
      if (this.carModelListSelected.length < 1) {
        this.$alert("还没选择车型数据");
        return;
      }

      let modelIdList = [];

      for (let i in this.carModelListSelected) {
        let row = this.carModelListSelected[i];

        modelIdList.push(row.id);
      }

      let idList = modelIdList.join(",");

      console.log("提交数据清单");
      console.log(idList);

      CarApi.addGoodsCarLink(this.goodsId, idList).then(res => {
        if (res.retCode) {
          this.$message("添加车型数据成功");

          this.carModel.show = false;
          this.loadCarLink();
        } else {
          this.$alert("添加车型数据失败");
        }
      });
    },

    getLenght(value) {
      return value.length;
    },

    onModelSelectChange(val) {
      console.log(val);
      this.carModelListSelected = val;
    },

    //点击搜索按钮
    doSearch() {
      CarApi.queryCarModel(
        this.carModel.serials,
        this.carModel.years
      ).then(res => {
        if (res.retCode == false) {
          console.error("模型数据查询错误");
          return;
        }
        this.carModelList = res.data;
      });
    },

    //品牌选择修改
    onChangeBrand() {
      console.log("select change" + this.carModel.brand);

      this.loadSelectSerials(this.carModel.brand);
    },

    loadSelectSerials(brandId) {
      this.carModel.serials = "";

      CarApi.querySeriesList(brandId).then(res => {
        if (res.retCode) {
          this.carModel.serialsOptions = res.data;
        } else {
          this.$alert("查询车系出错");
        }
      });
    },

    loadSelectBrand() {
      CarApi.queryBrandList().then(res => {
        if (res.retCode) {
          this.carModel.brandOptions = res.data;
        } else {
          this.$alert("品牌查询错误");
        }
      });
    },

    loadModelList() {
      CarApi.queryBrandList().then(res => {
        if (res.retCode) {
          this.carModel.brandOptions = res.data;
        } else {
          this.$alert("品牌查询错误");
        }
      });
    },

    addCarModel() {
      this.carModel.show = true;

      CarApi.queryCarModel(15, "").then(res => {
        if (res.retCode == false) {
          console.error("模型数据查询错误");
          return;
        }
        this.carModelList = res.data;
      });

      this.loadSelectBrand();
    }
  },

  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
